<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('上传Kerberos密钥文件')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="520px" @close='close'>
    <el-form :model="record" label-width="100px" label-position="left" ref="form" :rules="rules" class="kafkaUpfileCa">
      <el-form-item label="keytab" prop="keytab">
        <el-upload class="upload-Upgrade" ref="upload" action="-" :on-change="beforeFileUpload" :show-file-list='false' :multiple='false' :auto-upload='false'>
          <el-button slot="trigger" size="mini" type="primary" class="keytabButton">{{$t('选取文件')}}</el-button>
        </el-upload>
        <el-input v-emoji v-model="record.keytab" style="width:215px;margin-left:10px;" size='small' readonly></el-input>
        <i class="el-icon-close hoverHand iCartoon" style="margin-left:10px;" v-if="record.keytab" @click="clearRecord('keytab')"></i>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" class="addSubmit">{{$t('确 定')}}</el-button>
      <el-button @click="close" class="addClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'uploadFile',
  data () {
    return {
      dialogVisible: false,
      formData: new FormData(),
      record: {
        keytab: ''
      },
      rules: {}
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      this.record.keytab = data.keytab
    },
    submit () {
      let formData = JSON.parse(JSON.stringify(this.record))
      this.$emit('caFileChange', formData, this.formData)
      this.close()
    },
    // CA证书选择文件
    beforeFileUpload (file, fileList) {
      // const isFirmware = file.name.indexOf('.keytab') >= 0
      // if (!isFirmware) {
      //   this.$messages.error('上传的文件只能是 .keytab 格式!')
      // } else {
      this.record.keytab = file.name
      this.formData.set('keytab', file.raw)
      // }
      return true
    },
    close () {
      this.$refs.upload.clearFiles()
      this.dialogVisible = false
      this.record.keytab = ''
      this.formData = new FormData()
    },
    clearRecord (name) {
      this.record[name] = ''
      this.formData.delete(name)
    }
  }
}
</script>
<style lang="less" scoped>
.kafkaUpfileCa {
  margin: 0 0 0 30px;
  .upload-Upgrade {
    display: inline;
  }
}
.hoverHand {
  opacity: .75;
  color: #606266;
  cursor: pointer;
}
</style>
